<template>
  <div class="bbq-check-box">
    <slot></slot>
  </div>
</template>

<script lang="ts">
import {provide,reactive,toRefs,ref,Ref,defineComponent} from 'vue'

export default defineComponent({
  name: "bbq-check-box",
  props: {
    modelValue: {
      type: Array,
      default: ()=> []
    }
  },
  emits:['update:modelValue'],
  setup(props,ctx){
    //定义新的数组
    const arr: Ref<Array<string|undefined|unknown|number>> = ref(props.modelValue)

    //对组件外部的值发生变化
    const changeEvent = function (value: string|number) {
      //判断数组中是是否存在这个值
      //push 新的值进入数组中
      const index = arr.value.indexOf(value)
      if(index > -1) {
        //如果存在则删除
        arr.value.splice(index,1)
      }else {
        //不存在返回-1 push进去
        arr.value.push(value)
      }
      //开始响应变化
      ctx.emit('update:modelValue', arr.value)
    }

    provide("checkGroup", reactive({
      ...toRefs(props),
      changeEvent: changeEvent,
    }))

    return {
      arr
    }
  }
})
</script>
